<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="keyword" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" v-on:click="keywordQuery">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表v-loading="listLoading"-->
        <el-table :data="tableDatas" v-loading="listLoading" @selection-change="handleSelectionChange"
            highlight-current-row style="width: 100%">
            <!--多选框-->
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column type="index" width="120" label="序号"> </el-table-column>
            <el-table-column prop="username" label="用户名" width="200">
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="200">
            </el-table-column>
            <el-table-column prop="phone" label="手机号码" width="200">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
            <el-table-column prop="state" label="状态" width="200">
                <template scope="scope">
                    <span v-if="scope.row.state == 0" style="color: coral">禁用</span>
                    <span v-if="scope.row.state == 1" style="color: green">启用</span>
                </template>
            </el-table-column>
            <el-table-column label="所属角色" width="200" show-overflow-tooltip>
                <template scope="scope">
                    {{scope.row.dbRoles.map(r => r.name).join(",")}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" :disabled="this.sels.length === 0" @click="handlePatchDel">批量删除</el-button>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[5, 10, 15]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totals" style="float: right">
            </el-pagination>
        </el-col>

        <!--添加或修改界面-->
        <el-dialog :title="title" :visible.sync="saveFormVisible" :close-on-click-modal="false">
            <el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="saveForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="saveForm.phone" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址" prop="email">
                    <el-input v-model="saveForm.email" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password" v-if="saveForm.id == null">
                    <el-input v-model="saveForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="saveForm.age" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工状态">
                    <el-radio v-model="saveForm.state" :label="0">禁用</el-radio>
                    <el-radio v-model="saveForm.state" :label="1">启用</el-radio>
                </el-form-item>
                <el-form-item label="所属角色">
                    <template>
                        <el-select v-model="saveForm.roles" multiple placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="saveFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="saveSubmit">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    data() {
        return {
            options: [],
            title: "",
            //1.分页查询相关数据
            totals: 0, //总记录条数
            currentPage: 1, //当前页,要传递到后台的
            pageSize: 5, //每页显示多少条
            tableDatas: [], //当前页数据
            listLoading: false,

            //2.高级查询相关数据
            keyword: "",

            //3.删除相关数据

            //4.批量删除相关数据
            sels: [], //存储多选记录

            //5.添加和修改相关数据
            saveFormVisible: false,
            saveForm: {
                id: null,
                username: null,
                phone: null,
                email: null,
                password: null,
                age: null,
                state: null,
                roles: [],
            },

            //6.添加和修改校验规则-表单项校验
            saveFormRules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                ],
                phone: [
                    { required: true, message: "请输入手机号码", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入登录密码", trigger: "blur" },
                ],
            },
        };
    },
    methods: {
        //查询所有角色
        getOptions() {
            this.$http("/role").then(res => {
                this.options = res.data.data;
            }).catch(() => {
                this.$message.error("服务器忙，请稍后重试！【400/404/...】");
            })
        },
        //1.分页查询相关方法
        //1.1.获取列表数据
        getTableData() {
            let para = {
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                keyword: this.keyword,
            };
            this.listLoading = true; //显示加载圈!!!
            //分页查询
            this.$http.post("/employee", para).then((result) => {
                console.log(result);
                this.totals = result.data.total; //注意后端返回的是total,而不是totals!!!,可以打印result查看
                this.tableDatas = result.data.list;
                this.listLoading = false; //关闭加载圈!!!
            });
        },
        //1.2.选择第几页时触发
        handleCurrentChange(curentPage) {
            this.currentPage = curentPage;
            this.getTableData(); //获取列表数据
        },
        //1.3.选择每页显示记录条数时触发
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getTableData(); //获取列表数据
        },

        //2.高级查询相关方法
        keywordQuery() {
            this.currentPage = 1; //!!!

            this.getTableData(); //调用调用分页列表方法,因为关键字keyword已经进行了v-model的双向绑定!
        },

        //3.删除相关方法
        handleDel(row) {
            this.$confirm("此操作将永久删除该用户，是否继续？", "删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    // 获取当前用户的id
                    this.$http
                        .delete("/employee/" + row.id)
                        .then((res) => {
                            console.log(res);
                            if (res.data.success) {
                                // 删除成功
                                this.$message.success(res.data.msg);

                                let lastPage = Math.ceil(this.totals / this.pageSize); // 向上取整，计算出当前的总页数，这个页数就是最后一页

                                // 删除最后一页，只有一条数据，要返回上一页，并且最后一页不能是第一页
                                if (
                                    this.currentPage != 1 &&
                                    this.totals % this.pageSize == 1 &&
                                    this.currentPage == lastPage
                                ) {
                                    // 设置返回上一页
                                    this.currentPage = this.currentPage - 1;
                                }
                                // 删除成功，重新查询列表
                                this.getTableData();
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch(() => {
                            this.$message.error("网络异常，请稍后重试！【400/404/...】");
                        });
                })
                .catch(() => {
                    this.$message.info("已取消删除");
                });
        },
        //4.批量删除相关方法
        //4.1.选项改变时触发
        handleSelectionChange(val) {
            console.log(val);
            //传入的参数是选中的行的数据,行的数组,我们要从这个数组获取id,得到一个id数组[1,2,3,4]
            this.sels = val.map((u) => u.id); //!!!数组的map映射!!!
            console.log(this.sels);
        },
        //4.2.批量删除
        handlePatchDel() {
            this.$confirm("此操作将永久删除选中的菜单，是否继续？", "删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    //获取当前用户的id
                    this.$http
                        .patch("/employee", this.sels)
                        .then((res) => {
                            if (res.data.success) {
                                //删除成功
                                this.$message.success(res.data.msg);
                                //删除成功，重新查询列表
                                this.getTableData();
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch(() => {
                            this.$message.error("网络异常，请稍后重试！【400/404/...】");
                        });
                })
                .catch(() => {
                    this.$message.info("已取消删除");
                });
        },

        //5.添加和修改相关方法
        //5.1.点击添加弹出对话框
        handleAdd() {
            //1.清空form表单
            this.saveForm = { state: 0 };
            //2.设置标题
            this.title = "新增";
            //3.弹出模态框
            this.saveFormVisible = true;
            this.getOptions();
        },
        //5.2.点击修改弹出对话框
        handleEdit(row) {
            //1.设置标题
            this.title = "编辑";

            //2.将row对象拷贝给一个空对象,空对象赋值给saveForm.避免修改的时候影响行数据
            this.saveForm = Object.assign({}, row); //深拷贝!!!
            this.getOptions();
            this.saveForm.roles=row.dbRoles.map(r=>r.id);
            //3.弹出模态框
            this.saveFormVisible = true;
        },

        saveSubmit() {
            this.$refs["saveForm"].validate((valid) => {
                if (valid) {
                    this.$http
                        .put("/employee", this.saveForm)
                        .then((res) => {
                            if (res.data.success) {
                                //1.提示操作成功
                                this.$message.success(res.data.msg);

                                //2.关闭对话框
                                this.saveFormVisible = false;
                                if (this.saveForm.id == null) {
                                    this.totals++;
                                    this.currentPage = Math.ceil(this.totals / this.pageSize);
                                }
                                this.getTableData();
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch(() => {
                            this.$message.error("网络异常，请稍后重试！【400/404/...】");
                        });
                } else {
                    this.$message.error("表单校未通过！");
                    return false;
                }
            });
        },
    },
    mounted() {
        this.getTableData();
    },
};
</script>

<style scoped></style>